<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>教育资源-教师资源</title>
	<link rel="stylesheet" href="css/AlbumNext.css">
	<link rel="stylesheet" href="css/common.css">
	<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
	<!--[if IE 6]> 
	<script src="js/iepng.js" type="text/javascript"></script> 
	<script type="text/javascript">
	   EvPNG.fix('div, ul, img, li, input,a,span');  
	</script>
	<![endif]-->
</head>
<body>
<div id ="header" ></div>
<div class="albumMainBg">
	<div class="albumMid">
		<p class="nav2">
			<a href="">工作空间</a>
			<span>&gt;</span>
			<a href="">相册</a>
			<span>&gt;</span>
			<a href="">我的相册</a>
		</p>
		<h2 class="space_tit mgl5">我的照片</h2>
		<div class="widget-box clearfix">
			<div class="leftLogo">
				<img src="./imgs/yueming.jpg" alt="">
			</div>
			<div class="rtList">
				<span class="topLine">
					<span class="bigOne">111111</span>
					<b>2张照片</b>
					/ 所有人可见 /
				</span>
				<a href="javascript:void(0)" class="arrowDown"></a>
				<div class="album_detailsbox dis_none">
					<dl class="album_detail_dl c_tx3 clearfix">
			            <dt class="fl">描述</dt>
			            <dd class="z_fluid">11111</dd>
			        </dl>
			        <dl class="album_detail_dl c_tx3 clearfix mgb10">
        	            <dt class="fl">权限</dt>
        	            <dd class="z_fluid">所有人可见</dd>
        	        </dl>
			        <dl class="album_detail_dl c_tx3 clearfix mgb10">
        	            <dt class="fl">权限</dt>
        	            <dd class="z_fluid">所有人可见</dd>
        	        </dl>
				</div>
				<div class="jzm_rbox">
					<span>赞</span>
					<em>0</em>
				</div>
				<div class="mod_album_tool clearfix">
					<a href="AlbumAdd.html" class="jzm_submitp">
						<i class="icon_upload_m png_bg icon_m"></i>
						上传照片
					</a>
					<div class="mod_album_more more2">
						<a href="javascript:void(0)" class="moreClick gray_btn album_more_btn">
							更多
						</a>
						<div class="album_more_box dis_none">
			                <p>
			                	<a href="javascript:void(0)" class="c_tx2 widget_updateAlbum">编辑相册</a>
			                </p>
			                <p>
				                <a href="javascript:void(0)" class="c_tx2 widget_delAlbum">删除相册
				                </a>
			                </p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<ul class="mod_album_list2">
			<li class="album_list_item">
				<div class="t_img">
					<a href="javascript:void(0);">
						<img src="./imgs/midBanner.jpg" alt="">
					</a>
				</div>
				<p class="b_txt">
					<span class="c_tx2">2019年08月27日 14:33</span>
				</p>
				<div class="jzm_blank dis_none">11111</div>
				<div class="album_arrow dis_none">
					<div class="album_opt">
						<i class="arrow_blue_down"></i>
					</div>
					<div class="drop-box album_dropbox dis_none">
						<p>
							<span class="edit_photo">
								<i class=" icon_edit_m icon_m  png_bg mgr5"></i>
								编辑
							</span>
						</p>

						<p>
							<span class="cover_book">
								<i class=" icon_feawall_m icon_m  png_bg mgr5"></i>
								设成封面
							</span>
						</p>

						<p>
							<span class=" figure_photo">
								<i class=" icon_grade_m icon_m  png_bg mgr5"></i>
								形象照
							</span>
						</p>

						<p>
							<span class="share_to">
								<i class=" icon_edit_share icon_m  png_bg mgr5"></i>
								分享到
							</span>
						</p>

						<p>
							<span class="delete_Photo">
								<i class="icon_m icon_del2_m png_bg mgr5"></i>
								删除
							</span>
						</p>
					</div>
				</div>
			</li>
		</ul>
	</div>
</div>
<div class="midPicWHeel dis_none">
	<div class="wheelTit">
		cutPhoto.png
		<a title="取消" class="closedBtn"></a>
	</div>
	<div class="ban" id="demo1">
		<div class="ban2" id="ban_pic1">
			<div class="prev1" id="prev1"><img src="images/index_tab_l.png" width="28" height="51"  alt=""/></div>
			<div class="next1" id="next1"><img src="images/index_tab_r.png" width="28" height="51"  alt=""/></div>
			<ul style="">
				<li><a href="javascript:;"><img src="images/b1.jpg" width="500" height="500" alt=""/></a></li>
				<li><a href="javascript:;"><img src="images/b2.jpg" width="500" height="500" alt=""/></a></li>
				<li><a href="javascript:;"><img src="images/b3.jpg" width="500" height="500" alt=""/></a></li>
				<li><a href="javascript:;"><img src="images/b4.jpg" width="500" height="500" alt=""/></a></li>
				<li><a href="javascript:;"><img src="images/b5.jpg" width="500" height="500" alt=""/></a></li>
				<li><a href="javascript:;"><img src="images/b1.jpg" width="500" height="500" alt=""/></a></li>
				<li><a href="javascript:;"><img src="images/b2.jpg" width="500" height="500" alt=""/></a></li>
				<li><a href="javascript:;"><img src="images/b3.jpg" width="500" height="500" alt=""/></a></li>
				<li><a href="javascript:;"><img src="images/b4.jpg" width="500" height="500" alt=""/></a></li>
				<li><a href="javascript:;"><img src="images/b5.jpg" width="500" height="500" alt=""/></a></li>
			</ul>
		</div>
		<div class="min_pic">
			<div class="prev_btn1" id="prev_btn1"><img src="images/feel3.png" width="9" height="18"  alt=""/></div>
			<div class="num clearfix" id="ban_num1">
				<ul>
					<li><a href="javascript:;"><img src="images/s1.jpg" width="80" height="80" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/s2.jpg" width="80" height="80" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/s3.jpg" width="80" height="80" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/s4.jpg" width="80" height="80" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/s5.jpg" width="80" height="80" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/s1.jpg" width="80" height="80" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/s2.jpg" width="80" height="80" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/s3.jpg" width="80" height="80" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/s4.jpg" width="80" height="80" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/s5.jpg" width="80" height="80" alt=""/></a></li>
				</ul>
			</div>
			<div class="next_btn1" id="next_btn1"><img src="images/feel4.png" width="9" height="18"  alt=""/></div>
		</div>
		<div class="mhc"></div>
		<div class="pop_up" id="demo2">
			<div class="pop_up_xx"><img src="images/chacha3.png" width="40" height="40"  alt=""/></div>
			<div class="pop_up2" id="ban_pic2">
				<div class="prev1" id="prev2"><img src="images/index_tab_l.png" width="28" height="51"  alt=""/></div>
				<div class="next1" id="next2"><img src="images/index_tab_r.png" width="28" height="51"  alt=""/></div>
				<ul>
					<li><a href="javascript:;"><img src="images/b1.jpg" width="500" height="500" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/b2.jpg" width="500" height="500" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/b3.jpg" width="500" height="500" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/b4.jpg" width="500" height="500" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/b5.jpg" width="500" height="500" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/b1.jpg" width="500" height="500" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/b2.jpg" width="500" height="500" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/b3.jpg" width="500" height="500" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/b4.jpg" width="500" height="500" alt=""/></a></li>
					<li><a href="javascript:;"><img src="images/b5.jpg" width="500" height="500" alt=""/></a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="banRight">
		<div class="reviewTop">
			<div class="userInfo">
				<a href="" target="_blank">
					<img src="http://www.huijiaoyun.com/uploads/avatar/data/24/6/fd5dd06f52cc42d4844521b21657841e_90x90.jpg?1566545020" class="user_pic">
				</a>
				<div class="pdt5 clearfix">
					<p>
						<a href="" class="nameLink">
							张三丰
						</a>
					</p>
					<p>
						<a href="" class="f14 dateLink">
							2019-08-27 14:33
						</a>
					</p>
				</div>
			</div>
			<div class="signName">
				11111
			</div>
			<div class="reviewModule">
				<div class="midPic">
					<div class="reviewFun pdb10">
	                    <a href="javascript:void(0)" class="praise">
	                    	(<em num="0">0</em>)
	                    </a>
	                    <span>|</span>
	                    <a href="javascript:void(0)" class="reviewNum"><i>评论</i>(<em>0</em>)</a>
	                    <span>|</span>
	                    <a href="javascript:void(0)" class="pageviews" is_sub="0"><i>浏览量</i>(<em num="14">14</em>)</a>
					</div>
					<textarea placeholder="我也说一句" class="reviewBox"></textarea>
					<div class="clearfix bottomLine">
						<span class="fl">
						还能输入
						<i class="Constantia">138</i>
						字
						</span>
						<input type="button" class="blue_btn fr system_submit_from" value="评论">
					</div>
					<ul class="revList"></ul>
					<div class="photo_show_box_comment_isnull">还没有人发表评论，快来评论吧！</div>
				</div>
			</div>

		</div>
	</div>

</div>
<div class="footerBot"></div>
<script src="./js/jquery.js"></script>
<script src="./js/fxtpl.plus.js"></script>
<link rel="stylesheet" href="./webupload/webuploader.css">
<script src="./webupload/webuploader.js"></script>
<script src="./webupload/upload.js"></script>
<script src="./layui/layui.all.js"></script>
<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./js/wheel/pic_tab.js"></script>
<script type="text/javascript">
jq('#demo1').banqh({
	box:"#demo1",//总框架
	pic:"#ban_pic1",//大图框架
	pnum:"#ban_num1",//小图框架
	prev_btn:"#prev_btn1",//小图左箭头
	next_btn:"#next_btn1",//小图右箭头
	pop_prev:"#prev2",//弹出框左箭头
	pop_next:"#next2",//弹出框右箭头
	prev:"#prev1",//大图左箭头
	next:"#next1",//大图右箭头
	pop_div:"#demo2",//弹出框框架
	pop_pic:"#ban_pic2",//弹出框图片框架
	pop_xx:".pop_up_xx",//关闭弹出框按钮
	mhc:".mhc",//朦灰层
	autoplay:true,//是否自动播放
	interTime:5000,//图片自动切换间隔
	delayTime:400,//切换一张图片时间
	pop_delayTime:400,//弹出框切换一张图片时间
	order:0,//当前显示的图片（从0开始）
	picdire:true,//大图滚动方向（true为水平方向滚动）
	mindire:true,//小图滚动方向（true为水平方向滚动）
	min_picnum:5,//小图显示数量
	pop_up:true//大图是否有弹出框
})
</script>
<script>
 var numSpace = {numSpace:5};
 var header = Fxtpl.render('./weight/headerAllInputChange.html',numSpace);
$('#header').html(header);

$(".mod_album_more").hover(function(){
	// alert("点击到了跟多的这个按钮"); 
	$(".album_more_box").removeClass("dis_none");
},function(){
	// alert("点击到了跟多的这个按钮out");
	$(".album_more_box").addClass("dis_none");
});

$(".arrowDown").hover(function(){
	$(".album_detailsbox").removeClass("dis_none");
},function(){
	$(".album_detailsbox").addClass("dis_none");
})

// every Pic hover

$(".album_list_item").hover(function(){
	$(this).find(".jzm_blank").removeClass("dis_none");
	$(this).find(".album_arrow").removeClass("dis_none");
},function(){
	$(this).find(".jzm_blank").addClass("dis_none");
	$(this).find(".album_arrow").addClass("dis_none");
});

// every Pic hover

$(".album_list_item .album_arrow").on("click",function(){
	if( $(".album_dropbox").hasClass("dis_none") ){
		$(".album_dropbox").removeClass("dis_none");
	}else {
		$(".album_dropbox").addClass("dis_none");
	}
	return false;
});

// every pic click
$(".edit_photo").on("click",function(){
	// 编辑图片的时候用的
	var str= '<div class="lineHeight clearfix">';
		str += '<label for="name">照片名称</label>';
		str += '<input type="text" maxlength="10" name="name" id="name" class="inputForm">';
		str	+='<label>';
		str +='<strong>3</strong>';
		// 这里面有个计数的功能；
		str +='/30';
		str +='</label>';
		str += '</div>';
		str += '<div class="lineHeight clearfix">';
			str += '<label for="describe">照片描述</label>';
			str += '<textarea type="textarea" name="describe" placeholder="说说这个相册的故事...(非必填)"  class="textareaIn"></textarea>';
			str	+='<label>';
			str +='<strong>3</strong>';
			// 这里面有个计数的功能；
			str +='/30';
			str +='</label>';
		str += '</div>';
		str += '<div class="lineHeight clearfix">';
		str +="<label for='power' >照片分类</label>";
		str += '<select name="power">';
		str +='<option value="">相册1</option>';
		str +='<option value="">相册2</option>';
		str +=	'</select>';
		str +='<div class="btnLine">';
			str +="<button class='sure'>确定</button>";
			str +="<button class='cancal'>取消</button>";
		str +='</div>';
		str +=	'</div>';
		layer.open({
		  type: 1,
		  title:"编辑照片",
		  area: ['437px', '320px'],
		  shadeClose: true, //点击遮罩关闭s
		  content:str,
		});
}); 

$(".cover_book").on("click",function(){
	layer.msg('设置成封面成功', {icon: 1});
});
$(".figure_photo").on("click",function(){
	layer.msg('设置成形象照成功', {icon: 1});
});
$(".share_to").on("click",function(){
	var strClass = "<div class='lineHeight clearfix'>";
		strClass+= '<label for="power">照片分类</label>';
		strClass+= '<select class="myClassLine">';
			strClass+="<option value='相册1'>相册1</option>";
			strClass+="<option value='相册2'>相册2</option>";
		strClass+= '</select>';
		strClass+="</div>";
		strClass +='<div class="btnLine">';
			strClass +="<button class='sure'>确定</button>";
			strClass +="<button class='cancal'>取消</button>";
		strClass +='</div>';
	layer.open({
	  type: 1,
	  title:"分享到班级相册",
	  area: ['260px', '180px'],
	  shadeClose: true, //点击遮罩关闭
	  content:strClass,
	});
});

$(".delete_Photo").on("click",function(){
	layer.confirm('确定要删除图片吗', {
	  btn: ['删除',"退出"] //按钮
	}, function(){
	  layer.msg('删除成功', {icon: 1});
	}, function(){
	});
});


// 编辑相册的时候用的
var str= '<div class="lineHeight clearfix">';
	str += '<label for="name">相册名称</label>';
	str += '<input type="text" maxlength="10" name="name" id="name" class="inputForm">';
	str	+='<label>';
	str +='<strong>3</strong>';
	// 这里面有个计数的功能；
	str +='/30';
	str +='</label>';
	str += '</div>';
	str += '<div class="lineHeight clearfix">';
		str += '<label for="describe">相册描述</label>';
		str += '<textarea type="textarea" name="describe" placeholder="说说这个相册的故事...(非必填)"  class="textareaIn"></textarea>';
		str	+='<label>';
		str +='<strong>3</strong>';
		// 这里面有个计数的功能；
		str +='/30';
		str +='</label>';
	str += '</div>';
	str += '<div class="lineHeight clearfix">';
	str +="<label for='power' >相册权限</label>";
	str += '<select name="power" >';
	str +='<option value="">所有人可见</option>';
	str +='<option value="">好友可见</option>';
	str +=	'<option value="">仅主人可见</option>';
	str +=	'</select>';
	str +='<div class="btnLine">';
		str +="<button class='sure'>确定</button>";
		str +="<button class='cancal'>取消</button>";
	str +='</div>';
	str +=	'</div>';
	// 上传 更多（编辑和删除事件添加）
$('.widget_updateAlbum').on('click', function(){
    layer.open({
      type: 1,
      title:"编辑相册",
      area: ['437px', '320px'],
      shadeClose: true, //点击遮罩关闭
      content:str,
    });
});

$(".widget_delAlbum").on("click",function(){
	layer.confirm('确定要删除相册吗', {
	  btn: ['删除',"退出"] //按钮
	}, function(){
	  layer.msg('删除成功', {icon: 1});
	}, function(){
	});
});

// 点击到图片变成轮播的状态
$(".mod_album_list2 li").on("click",function(){
	if( $(".midPicWHeel").hasClass("dis_none")===true){
		$(".midPicWHeel").removeClass("dis_none");
	}
	return false;
});
/*lunbp*/ 
$(".wheelTit a").on("click",function(){
	if( $(".midPicWHeel").hasClass("dis_none")===false){
		$(".midPicWHeel").addClass("dis_none");
	}
	return false;
});



</script>
</body>	
</html>